<template>
  <div class="detail-rate">
    <span class="detail-rate-text">轻点评分</span>
    <div class="detail-rate-wrapper">
      <van-rate
        :value="rateValue"
        :size="25"
        color="#1D89EE"
        void-color="#DEE0E2"
        void-icon="star"
        @change="onRateChange"
      ></van-rate>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    rateValue: Number
  },
  methods: {
    onRateChange (e) {
      this.$emit('onRateChange', e.mp.detail)
    }
  }
}
</script>

<style lang="stylus" scoped>
.detail-rate
  display: flex;
  padding: 10px 0;
  margin: 0 15px;
  align-items: center;
  border-bottom: 1px solid #ebebeb;

  .detail-rate-text
    font-size: 14px;
    color: #909090;

  .detail-rate-wrapper
    flex: 1;
    text-align: right;
</style>
